import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { HYRequestInterceptors, HYRequestConfig } from './type'

// 引入loading组件
import { ElLoading } from 'element-plus'
// loading的类型
import { ILoadingInstance } from 'element-plus'

const DefaultLoading = true

class HYRequest {
  instance: AxiosInstance
  interceptors?: HYRequestInterceptors
  loading?: ILoadingInstance
  showLoading?: boolean

  constructor(config: HYRequestConfig) {
    // 根据配置创建axios实例
    this.instance = axios.create(config)
    // 保存基本信息
    this.interceptors = config.interceptors
    this.showLoading = config.showLoading ?? DefaultLoading

    // 1. 从config中取出的拦截器是对应的实例的拦截器
    // 为instance实例的拦截器使用传入的拦截器
    this.instance.interceptors.request.use(
      // ?. 可选链
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCatch
    )
    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCatch
    )

    // 2. 添加所有的实例都有的请求拦截器  简单项目只用到全局的拦截器
    this.instance.interceptors.request.use(
      (config) => {
        if (this.showLoading) {
          this.loading = ElLoading.service({
            lock: true, // 蒙版
            text: '正在请求数据....',
            spinner: '', // 图标
            background: 'rgba(0,0,0,.5)' // 遮盖的背景色
          })
        }
        return config
      },
      (err) => {
        return err
      }
    )
    // 添加所有的实例都有的响应拦截器
    this.instance.interceptors.response.use(
      (res) => {
        // 将loading移除
        this.loading?.close()

        // axios会封装请求回来的数据，把data放到data中，还有config，headers，request，status等其他信息
        const data = res.data
        // 请求成功也可能失败
        if (data.returnCode === '-1001') {
          console.log('请求失败，错误信息')
        } else {
          return res.data // 返回的就是服务器给的数据
        }
      },
      (err) => {
        // 将loading移除
        this.loading?.close()

        // 判断不同的HttpErrorCode显示不同的错误信息
        if (err.response.status === 404) {
          console.log('404的错误')
        }
        return err
      }
    )
  }

  // promise里需要有类型，由请求者决定，这里我感觉可以用any，因为请求的类型比较复杂，没必要
  // TODO: 这里的T还是有点不太懂
  request<T>(config: HYRequestConfig<T>): Promise<T> {
    return new Promise((resolve, reject) => {
      // 1. 单个请求对请求config的处理
      // TODO: 这一步是干什么的？好像是单个请求拦截器
      if (config.interceptors?.requestInterceptor) {
        config = config.interceptors.requestInterceptor(config)
      }

      // 2. 判断是否需要显示loading
      if (config.showLoading === false) {
        this.showLoading = config.showLoading
      }

      // 真正的通过axios去请求
      this.instance
        // 传了两个泛型，泛型本身就是个类型替换，假如传了string和number，用到T，R的地方就分别替换成string和number
        // 请求返回的res的类型是由调用函数者决定的
        .request<any, T>(config)
        .then((res) => {
          // 1. 单个请求对数据的处理
          // TODO:这一步是干什么的？
          if (config.interceptors?.responseInterceptor) {
            res = config.interceptors.responseInterceptor(res)
          }

          // 2. 将showloading设置true，这样不会影响下一个请求
          this.showLoading = DefaultLoading

          // 3. 将结果resolve返回出去
          resolve(res)
        })
        .catch((err) => {
          // 将showloading设置true，这样不会影响下一个请求
          this.showLoading = DefaultLoading
          reject(err)
          return err
        })
    })
  }

  get<T>(config: HYRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'GET' })
  }

  post<T>(config: HYRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'POST' })
  }

  delete<T>(config: HYRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'DELETE' })
  }

  patch<T>(config: HYRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'PATCH' })
  }
}

export default HYRequest
